let inputs = document.querySelectorAll('form input');
console.log(inputs)

var yx =/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
// 邮箱验证
inputs[0].onblur=function(){
    if(this.value==''){
        inputs[0].placeholder='邮箱不能为空'
        inputs[0].style.border = '1px solid red';
        return false;
    }else{
        inputs[0].style.border = '1px solid #a9a9a9';
    }
    if(!yx.test(this.value)){
        inputs[0].style.border = '1px solid red';
        inputs[0].value='';
        inputs[0].placeholder='请输入正确的邮箱'
    }else{
        inputs[0].style.border = '1px solid #a9a9a9';
    }
    
}

// 用户名验证
yhm=/[a-zA-Z0-9_]{3,16}/ 
inputs[1].onblur=function(){
    if(this.value==''){
        inputs[1].placeholder='用户登陆名不能为空'
        inputs[1].style.border = '1px solid red';
        return false;
    }else{
        inputs[1].style.border = '1px solid #a9a9a9';
    }
    if(!yhm.test(this.value)){
        inputs[1].value='';
        inputs[1].style.border = '1px solid red';
        inputs[1].placeholder='请输入正确的用户名(字母数字下划线3-16位)'
    
    }else{
        inputs[1].style.border = '1px solid #a9a9a9';
    }
    
}
// 密码验证
pas=/^[\w]{8,16}$/;
inputs[2].onblur=function(){
    if(this.value==''){
        inputs[2].placeholder='密码不能为空'
        inputs[2].style.border = '1px solid red';
        return;
    }else{
        inputs[2].style.border = '1px solid #a9a9a9';
    }
    if(!yhm.test(this.value)){
        inputs[2].value='';
        inputs[2].style.border = '1px solid red';
        inputs[2].placeholder='请输入正确的密码(字母数字组成的3-16位)'
     1
    }else{
        inputs[2].style.border = '1px solid #a9a9a9';
    }
    
}

// 密码验证
inputs[3].onblur=function(){
    if(this.value==''){
        inputs[3].placeholder='密码不能为空'
        inputs[3].style.border = '1px solid red';
        return;
    }else{
        inputs[3].style.border = '1px solid #a9a9a9';

    }
    if(inputs[2].value!=inputs[3].value){
        inputs[3].value='';
        inputs[3].style.border = '1px solid red';
        inputs[3].placeholder='两次密码不一直'
        return;
    }else{
        inputs[3].style.border = '1px solid #a9a9a9';
    
    }
    
}




